<template>
  <div class="app-container">

    <!--<el-button style="margin-top: 20px;" @click="dialogFormVisible = true" type="primary" icon="el-icon-upload2">添加楼盘-->
    <!--</el-button>-->


    <el-table
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column
        prop="create_time"
        label="日期"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="楼盘姓名"
      >
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            @click="modifyHouse(scope.row)"
            type="text"
            size="small">
            修改楼盘
          </el-button>
          <el-button
            @click="deleteHouse(scope.row)"
            type="text"
            size="small">
            删除楼盘
          </el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-button style="margin-top: 50px;" @click="dialogFormVisible = true" type="primary" icon="el-icon-upload2">添加楼盘
    </el-button>


    <el-pagination class="pagination-style" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>


    <el-dialog title="添加楼盘" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="formData">
        <el-form-item label="楼盘名称">
          <el-input v-model="formData.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>确认删除该楼盘</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteSure">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog title="提示" :visible.sync="dialogModifyVisible">
      <el-form :model="formDataModify">
        <el-form-item label="原楼盘名称">
          <el-input v-model="formDataModify.name" :disabled="true" auto-complete="off" placeholder="原楼盘名称"></el-input>
        </el-form-item>

        <el-form-item label="新楼盘名称">
          <el-input v-model="formDataModify.newName" auto-complete="off" placeholder="请输入新楼盘名称"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifySure">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "house",
    data() {
      return {
        // 分页参数
        pageSize: 20,
        pageNum: 1,
        currentPage: 1,
        total: 0,
        tableData: [],
        formData: {
          name: '',
        },
        formDataModify: {
          name: '',
          newName: '',
          village_id: 0
        },
        dialogVisible: false,
        dialogFormVisible: false,
        dialogModifyVisible: false,
        sort: 0,
        village_id: 0
      }
    },
    created() {
      this.fetchData(this.pageNum)
    },
    methods: {
      fetchData(pageNum) {
        this.$http.post('village/list', {page: pageNum, pageSize: this.pageSize}).then(data => {
          if (data && data.data && data.data.data) {
            this.tableData = data.data.data.data
          }
        })
      },
      //page
      handleCurrentChange() {
        this.currentPage = val
        this.fetchData(this.currentPage)
      },
      addSure() {
        if (!this.formData.name) {
          return this.$message.warning('请输入楼盘名称')
        }

        this.$http.post('village/add', {name: this.formData.name}).then(data => {
          console.log(data.data.data)
          this.dialogFormVisible = false
          this.fetchData(this.pageNum)
        })
      },
      deleteHouse(item) {
        this.dialogVisible = true
        this.village_id = item.village_id
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      deleteSure() {
        this.$http.post('village/delete', {village_id: this.village_id}).then(data => {
          console.log(data.data.data)
          this.dialogVisible = false
          this.fetchData(this.pageNum)
        })
      },
      modifyHouse(item) {
        this.dialogModifyVisible = true
        this.formDataModify.name = item.name
        this.formDataModify.newName = ''
        this.formDataModify.village_id = item.village_id
        this.formDataModify.sort = item.sort
        console.log(this.formDataModify)
      },
      modifySure() {
        if (!this.formDataModify.newName) {
          return this.$message.warning('请输入新楼盘名称')
        }

        console.log(this.formDataModify)
        this.$http.post('village/update', {
          village_id: this.formDataModify.village_id,
          name: this.formDataModify.newName,
          sort: this.formDataModify.sort
        }).then(data => {
          console.log(data.data.data)
          this.dialogModifyVisible = false
          this.fetchData(this.currentPage)
        })
      }
    }
  }
</script>

<style scoped>
  .el-upload-list {
    width: 800px !important;
    height: 600px !important;
    margin: 20px auto !important;
  }

  .pagination-style {
    text-align: right;
    margin-top: 18px;
  }

</style>
